---
title: Aggiungere caratteri personalizzati
description: >-
  Stai cercando di utilizzare un carattere personalizzato per il tuo sito Astro? Utilizza Google Fonts 
  con Fontsource o aggiungi un carattere personalizzato da un file locale.
i18nReady: true
---
import PackageManagerTabs from '~/components/tabs/PackageManagerTabs.astro';


Questa guida ti mostrerà come aggiungere caratteri (web font) personalizzati al tuo progetto e come utilizzarli nei tuoi componenti.

## Aggiungere caratteri da un file locale

In questo esempio vedremo come aggiungere un carattere personalizzato utilizzando il file di caratteri `DistantGalaxy.woff`.

1. Aggiungi il file del carattere alla cartella `public/fonts/`.
1. Aggiungi lo statement `@font-face` al tuo CSS. Puoi aggiungerlo in un file `.css` globale che importerai in seguito, in un blocco `<style is:global>` o in un blocco `<style>` nel componente o nel layout specifico in cui vuoi utilizzare questo carattere.

    ```css
    /* Aggiungi il carattere personalizzato e indica al browser dove si trova. */
    @font-face {
      font-family: 'DistantGalaxy';
      src: url('/fonts/DistantGalaxy.woff') format('woff');
      font-weight: normal;
      font-style: normal;
      font-display: swap;
    }
    ```

1. Modifica il valore di `font-family` dello statement `@font-face` per modifcare lo stile degli elementi nel tuo componente o layout. In questo esempio, l'intestazione `<h1>` avrà un carattere personalizzato, mentre il paragrafo `<p>` no.

    ```astro title="src/pages/example.astro" {9-11}
    ---
    ---

    <h1>In a galaxy far, far away...</h1>

    <p>Custom fonts make my headings much cooler!</p>

    <style>
    h1 {
      font-family: 'DistantGalaxy', sans-serif;
    }
    </style>
    ```

## Aggiungere caratteri mediante Fontsource

Il progetto [Fontsource](https://fontsource.org/) semplifica l'utilizzo di Google Fonts e di altri caratteri open source fornendo moduli npm che puoi installare in base ai caratteri che decidi di utilizzare.

1. Cerca il carattere che vuoi utilizzare nel [catalogo di Fontsource](https://fontsource.org/). In questo esempio useremo [Twinkle Star](https://fontsource.org/fonts/twinkle-star).
1. Installa il package relativo al carattere scelto.

    <PackageManagerTabs>
      <Fragment slot="npm">
      ```shell
      npm install @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="pnpm">
      ```shell
      pnpm add @fontsource/twinkle-star
      ```
      </Fragment>
      <Fragment slot="yarn">
      ```shell
      yarn add @fontsource/twinkle-star
      ```
      </Fragment>
    </PackageManagerTabs>

    :::tip
    Puoi trovare il nome del package da utilizzare nella sezione "Quick Installation" di ogni pagina del carattere sul sito di Fontsource. È indicato con `@fontsource/` seguito dal nome del carattere.
    :::

1. Importa il package del carattere nel componente in cui vuoi utilizzarlo. Di solito ha senso farlo in un layout "comune" per assicurarsi che il carattere sia disponibile in tutto il sito.

    L'importazione aggiungerà automaticamente le regole `@font-face` necessarie per impostare il carattere.

    ```astro title="src/layouts/BaseLayout.astro"
    ---
    import '@fontsource/twinkle-star';
    ---
    ```

1. Utilizza il nome del carattere come valore di `font-family`, come mostrato nell'esempio `body` sulla pagina di Fontsource. Questo funzionerà in qualunque punto del tuo progetto Astro in cui puoi scrivere CSS.

    ```css
    h1 {
      font-family: "Twinkle Star", cursive;
    }
    ```

## Aggiungere caratteri su Tailwind

Se stai utilizzando l'[integrazione Tailwind](/it/guides/integrations-guide/tailwind/), puoi utilizzare uno dei metodi precedenti per installare il tuo carattere, con alcuni accorgimenti. Per installare il carattere puoi aggiungere uno statement [`@font-face` se stai usando un carattere locale](#aggiungere-caratteri-da-un-file-locale) oppure puoi utilizzare la [strategia di importazione di Fontsource](#aggiungere-caratteri-mediante-fontsource).

Puoi aggiungere il tuo carattere su Tailwind seguendo questo passi:

1. Segui una delle guide menzionate sopra saltando l'ultimo passo (quello in cui si aggiunge `font-family` al CSS).
2. Aggiungi il nome del carattere a `tailwind.config.cjs`.

    Questo esempio aggiunge `Inter` allo stack di caratteri sans-serif, con i caratteri di fallback di default di Tailwind CSS.

    ```js title="tailwind.config.cjs" ins={1,7-9}
    const defaultTheme = require("tailwindcss/defaultTheme");

    module.exports = {
      // ...
      theme: {
        extend: {
          fontFamily: {
            sans: ["InterVariable", "Inter", ...defaultTheme.fontFamily.sans],
          },
        },
      },
      // ...
    };
    ```

    Ora, tutti i testi sans-serif (il default di Tailwind) nel tuo progetto utilizzeranno il carattere scelto. Inoltre, la classe `font-sans` applicherà il carattere Inter.

Per maggiori informazioni, consulta la [guida alla configurazione di caratteri personalizzati di Tailwind](https://tailwindcss.com/docs/font-family#font-families).

## Risorse aggiuntive

- Impara come funzionano i web font nella [guida di MDN sui web font](https://developer.mozilla.org/en-US/docs/Learn/CSS/Styling_text/Web_fonts).
- Genera il CSS per il tuo carattere con [il Webfont Generator di Font Squirrel](https://www.fontsquirrel.com/tools/webfont-generator).
